<template>
<div v-if="disPlayFlag">
    <div class="">
        <div slot="header" class="clearfix job-tab-header">
            <span>角色维护</span>
        </div>
        <div>
            <el-form :rules="rules" ref="targetForm" :model="temp" label-width="120px" label-position='right' size="small">
                <el-form-item label="角色名称" prop="rolename">
                    <el-input v-model="temp.rolename" style="width:20%"></el-input>
                </el-form-item>
                <el-form-item label="是否有效" prop="validType">
                    <el-select v-model="temp.validType" clearable>
                        <el-option v-for="item in  yesOrNoOptions" :key="item.key" :label="item.display_name" :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属子系统" prop="subsysid">
                  <el-select v-model="temp.subsysid" clearable @focus="editSubSystemsOptions">
                    <el-option v-for="item in subSystemsOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
            </el-form>
            <el-row :gutter="5" style="border-top:1px solid #e6e6e6; padding-top:20px;">
                <el-col style="text-align: right;">
                    <el-button size="small" class="filter-item" type="primary" @click="saveData">保 存</el-button>
                    <el-button size="small" class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</div>
</template>

<script>
import {
  insertItem,
  compositeSelect,
  updateItem,
  selectSysSubsys
} from '@/api/systemManage/roleManagementEdit'
import {
  yesOrNoOptions
} from '@/utils/allOptions'

export default {
  name: 'userManagementEdit',
  components: {},
  props: {
    id: {
      type: String,
      default: ''
    },
    disPlayFlag: {
      type: Boolean,
      default: false
    },
    editType: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      // -------Options-----------
      yesOrNoOptions,
      // -------Options-----------
      subSystemsOptions: [],
      temp: {
        rolename: '',
        subsysid: '',
        validType: ''
      },
      rules: {
        rolename: [{
          required: true,
          message: '请输入角色名称',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 100,
          message: '长度在 0 到 100 个字符',
          trigger: 'blur'
        },
        {
          max: 100,
          message: '最大 100 个字符',
          trigger: 'blur'
        }
        ],
        validType: [{
          required: true,
          message: '请选择是否有效',
          trigger: 'blur'
        }]
      }
    }
  },
  mounted() {
    if (this.disPlayFlag) {
      // this.editSubSystemsOptions()
      // this.editForm()
    }
  },
  watch: {
    disPlayFlag: {
      handler: function(val, oldVal) {
        if (this.disPlayFlag) {
          // this.editSubSystemsOptions()
          // this.editForm()
        }
      },
      immediate: true
    }
  },
  methods: {
    editSubSystemsOptions() {
      const query = {
        sort: [{
          direction: 'ASC',
          property: 'id'
        }]
      }
      selectSysSubsys(query).then(response => {
        const records = response.data.data.records
        if (response.data.data.count > 0) {
          this.subSystemsOptions = []
          for (const item of records) {
            const input = {}
            input.id = item.id
            input.name = item.name
            this.subSystemsOptions.push(input)
          }
        }
      })
    },
    editForm() {
      if (this.editType === '1') {
        const searchCon = {
          'id': this.id
        }
        compositeSelect(searchCon).then(response => {
          if (response.data.data.count > 0) {
            const resData = response.data.data.records[0]
            this.temp = Object.assign({}, resData) // copy obj   this.subSystemsOptions.push(input);
          }
        })
      }
    },
    resetAll() {
      this.temp = {
        roleid: '',
        rolename: '',
        subsysid: '',
        validType: ''
      }
      this.$refs.targetForm.clearValidate()
    },
    closeSelf() {
      this.resetAll()
      this.$emit('closeMe')
    },
    saveData() {
      this.$refs.targetForm.validate(valid => {
        if (valid) {
          if (this.editType === '1') {
            updateItem(this.temp.roleid, this.temp).then(() => {
              this.resetAll()
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
              this.$emit('closeMe')
            })
          } else {
            insertItem(this.temp).then(() => {
              this.resetAll()
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.$emit('closeMe')
            })
          }
        }
      })
    }
  }
}
</script>
